/**
 * Created by zy on 2016/6/16.
 * 系统设置 - 阀值设置 - 复选下拉框通用方法 JQ插件模式
 */

;(function($){
    function Drop(element,options){
        this.element = element;
        this.defaults = {
            width: 200,
            height: 200,
            list: '',       // 下拉列表项(数组)
            data: '',       // 选中数据
            roleMap: ''     // 对应项
        };
        this.spans = [];
        this.settings = $.extend({}, this.defaults, options);
    }

    Drop.prototype = {

        // 隐藏所有下拉框
        hideAll: function(){
            var $all = $('div.zy-checkbox-inner');
            $all.each(function(){
                var $self = $(this);
                $self.find('div.zy-checkbox-body').removeClass('active');
                $self.find('div.zy-checkbox-list').hide();
                $self.find('div.zy-checkbox-btn-b').hide();
                $self.find('div.zy-checkbox-btn-a').show();
            });
        },

        // 展开复选下拉框并对结构初始化
        init: function(){
            var self = this;
            var $element = $(this.element);
            var $body = $element.find('div.zy-checkbox-body');
            var $btn_a = $element.find('div.zy-checkbox-btn-a');
            var $btn_b = $element.find('div.zy-checkbox-btn-b');
            var $list = $element.find('div.zy-checkbox-list');
            var $content = $element.find('div.zy-checkbox-content');
            var $ul = $element.find('ul.zy-checkbox-ul');

            // 按钮 a b
            $btn_a.click(function(){
                self.hideAll();
                $body.addClass('active');
                $list.show();
                $btn_a.hide();
                $btn_b.show();
            });
            $btn_b.click(function(){
                $body.removeClass('active');
                $list.hide();
                $btn_b.hide();
                $btn_a.show();
            });

            // 设置初始值
            if(self.settings.data){
                var temp_arr = self.settings.data.split(',');
                if($.isArray(temp_arr) && temp_arr.length > 0){
                    self.spans = temp_arr;
                }

                $content.empty();
                for(var i = 0, len = self.spans.length; i < len; i++){
                    var span = '<span data-a="'+self.spans[i]+'">'+self.settings.roleMap[self.spans[i]]+'</span>';
                    $content.append(span);
                }
            }

            // 设置下拉列表项
            if(self.settings.list && self.settings.list.length > 0){
                var arr = [];
                for(var k = 0, lenth = self.settings.list.length; k < lenth; k++){
                    var li = '<li><p class="zy-checkbox-p" title=""><i></i><span data-a="'+self.settings.list[k]['id']+'">'+self.settings.list[k]['name']+'</span></p></li>';
                    $ul.append(li);
                    arr.push(self.settings.list[k]['id']);
                }
                self.element.data('store',arr.join(','));
                self.element.data('list',self.settings.list);
            }

            var $p = $element.find('p.zy-checkbox-p');
            // 操作
            if($p.length > 0){
                $p.each(function(){
                    var $this_p = $(this);
                    var $this_i = $this_p.find('i');
                    var $this_span = $this_p.find('span');
                    for(var h = 0, lens = (self.spans).length; h < lens; h++){
                        if($this_span.attr('data-a') == (self.spans)[h]){
                            $this_i.addClass('active');
                        }
                    }
                });

                $p.off('click').click(function(event){
                    var $this_p = $(this);
                    var $i = $this_p.find('i');
                    $i.toggleClass('active');

                    // 下拉框 span
                    var $p_span = $this_p.find('span');
                    var v = $p_span.attr('data-a');

                    // 内容框 span
                    var $content_spans = $content.find('span');

                    // 移除已存在
                    var exist = false;
                    if($content_spans.length > 0){
                        $content_spans.each(function(){
                            var $this_span = $(this);
                            var s = $this_span.attr('data-a');
                            if(v == s){
                                $this_span.remove();
                                exist = true;
                            }
                        });
                        for(var j = 0, lens = self.spans.length; j < lens; j++){
                            if(v == self.spans[j]){
                                self.spans.splice(j,1);
                            }
                        }
                        self.element.data('store',self.spans.join(','));
                    }

                    // 添加选中行
                    if(!exist){
                        $content.append($p_span.clone());
                        self.spans.push(v);
                        self.element.data('store',self.spans.join(','));
                    }

                    // 不能为空
                    var $eq_p = $p.eq(0);
                    if(self.element.data('store').length === 0){
                        self.element.TIP({
                            content: '提醒角色不能为空,系统将自动为您设置第一组角色!',
                            timer: 3000,
                            scroll: false
                        });

                        if($eq_p.length > 0){
                            $eq_p.on('setDefault',function(){
                                setFirst();
                            });
                        }

                        // 填充默认第一条
                        function setFirst(){
                            $eq_p.find('i').addClass('active');

                            var $eq_span = $p.eq(0).find('span');
                            var $clone_span = $eq_span.clone();
                            var id = $eq_span.attr('data-a');

                            $content.empty().append($clone_span);

                            self.spans = [];
                            self.spans.push(id);
                            self.element.data('store','');
                            self.element.data('store',id);
                        }
                    }else{
                        if($eq_p.length > 0){
                            $eq_p.off('setDefault');
                        }
                    }

                    event.stopPropagation();
                    return false;
                });

                if($p.length > 5){
                    $list.css({
                        'height': 191,
                        'overflow-y': 'scroll',
                        'overflow-x': 'hidden'
                    });
                }
            }

            return self;
        }
    };

    $.fn.DropCheckbox = function(options){
        var drop = new Drop(this,options);
        return drop.init();
    }
})(jQuery);

/**
 * 之所有把这段代码独立在插件外，是因为多个插件会导致body被重复添加click事件
 * 此段代码可以优化，不建议这样使用
 */
$(document.body).on('click',function(event){
    var element = event.srcElement || event.target;
    var tag = $(element).hasClass('zy-checkbox-btn-a') || $(element).hasClass('zy-checkbox-btn-b') || $(element).hasClass('zy-checkbox-p') || $(element).parent('p').hasClass('zy-checkbox-p');
    if(!tag){
        var $checkboxs = $('div.zy-checkbox-inner');
        if($checkboxs.length > 0){
            $checkboxs.each(function(){
                var $self = $(this);
                $self.find('div.zy-checkbox-body').removeClass('active');
                $self.find('div.zy-checkbox-list').hide();
                $self.find('div.zy-checkbox-btn-b').hide();
                $self.find('div.zy-checkbox-btn-a').show();
                $self.find('p.zy-checkbox-p').eq(0).trigger('setDefault');
            });
        }
    }
});
